<template>
  <div class="dataSta">
    <a-skeleton :loading="skeLoading" active :paragraph="{ rows: 3 }">
      <a-card title="数据统计" :bordered="false">
        <div slot="extra" style="width:800px">
          <a-row type="flex" justify="end" :gutter="24">
            <a-col :lg="6" :md="8" :sm="24">
              <a-select style="width:200px" defaultValue="today" @change="todayChange">
                <a-select-option value="today">今天</a-select-option>
                <a-select-option value="yesterday">昨天</a-select-option>
                <a-select-option value="week">本周</a-select-option>
                <a-select-option value="lastweek">上周</a-select-option>
                <a-select-option value="month">本月</a-select-option>
                <a-select-option value="lastmonth">上月</a-select-option>
                <a-select-option value="quarter">半年</a-select-option>
              </a-select>
            </a-col>
            <a-col :lg="6" :md="8" :sm="24">
              <a-select style="width:200px" :placeholder="groupde" @change="groupChange">
                <a-select-option v-for="item in groupList" :key="item.groupId" :value="item.groupId">{{ item.groupName }}</a-select-option>
              </a-select>
            </a-col>
            <a-col :lg="6" :md="8" :sm="24">
              <a-select style="width:200px" placeholder="选择员工" @change="userChange">
                <a-select-option v-for="item in userList" :key="item.id" :value="item.user">{{ item.user }}</a-select-option>
              </a-select>
            </a-col>
          </a-row>
        </div>
        <div >
          <a-row :gutter="24">
            <!--  <a-col :lg="4" :md="8" :sm="24">
            <head-info title="本周任务平均处理时间" content="32分钟" :bordered="true"/>
          </a-col> -->
            <a-col :lg="4" :md="8" :sm="24">
              <head-info title="预估金额" :content="moneyList.estimate_cos_price" :bordered="true"/>
            </a-col>
            <a-col :lg="4" :md="8" :sm="24">
              <head-info title="预估服务费" :content="moneyList.estimate_commission" :bordered="true"/>
            </a-col>
            <a-col :lg="4" :md="8" :sm="24">
              <head-info title="结算金额" :content="moneyList.actual_cos_price" :bordered="true"/>
            </a-col>
            <a-col :lg="4" :md="8" :sm="24">
              <head-info title="结算服务费" :content="moneyList.actual_commission" :bordered="true"/>
            </a-col>
            <a-col :lg="4" :md="8" :sm="24">
              <head-info title="通过商品" :content="moneyList.pass_num" :bordered="true"/>
            </a-col>
            <a-col :lg="4" :md="8" :sm="24">
              <head-info title="被翘商品" :content="moneyList.loss_num" :bordered="true"/>
            </a-col>
          </a-row>
        </div>
      </a-card>
    </a-skeleton>
    <a-skeleton :loading="skeLoading" active :paragraph="{ rows: 10 }">
      <div style="margin-top:20px">
        <a-card :bordered="false">
          <bar :data="barData" title="服务费柱状图" />
        </a-card>
      </div>
    </a-skeleton>
  </div>
</template>

<script>
import { getAdmingroupList, getCrewList } from '@/api/admin/user'
import { getGroupDataSta, getGroupDailySta } from '@/api/group'
import { Bar } from '@/components'
import HeadInfo from '@/components/tools/HeadInfo'
export default {
  name: 'DataSta',
  components: {
    Bar,
    HeadInfo
  },
  data () {
    return {
      // description: '显示你所有出单的商品列表.',
      value: 1,
      form: this.$form.createForm(this),
      loading: false,
      skeLoading: true,
      userList: [],
      groupList: [],
      values: {},
      timeSolt: 'today',
      type: 'rank',
      idd: '',
      userTitle: '选择员工',
      groupde: '选择小组',
      barData: [],
      moneyList: {
        estimate_cos_price: '0', // 预估金额
        estimate_commission: '0', // 预估服务费
        actual_cos_price: '0', // 结算金额
        actual_commission: '0', // 结算服务费
        pass_num: '0', // 通过商品
        loss_num: '0' // 被翘商品
      }
    }
  },
  created () {
    this.idd = this.$route.query.id
    // console.log('this.$route.query.id', this.$route.query.id)
    if (this.idd !== undefined) {
      this.getGroupDailySta(this.idd)
    } else {
      // this.getGroupDailySta()
    }
    this.getGroupDataSta(this.timeSolt)
    this.getAdmingroupList()
  },
  methods: {
    userChange (value) {
      // console.log(`组员 ${value}`)
    },
    groupChange (value) {
      // console.log(`小组 ${value}`)
      this.getGroupDailySta(value)
      this.getCrewList(value, 1)
    },
    // 数据统计
    getGroupDataSta (val) {
      getGroupDataSta({
        timeSolt: val
      })
        .then(res => {
          this.skeLoading = false
          /* this.moneyList = []
          this.moneyList.push(res.result) */
          this.moneyList.estimate_cos_price = res.result.estimate_cos_price
          this.moneyList.estimate_commission = res.result.estimate_commission
          this.moneyList.actual_cos_price = res.result.actual_cos_price
          this.moneyList.actual_commission = res.result.actual_commission
          this.moneyList.pass_num = String(res.result.pass_num)
          this.moneyList.loss_num = String(res.result.loss_num)
        })
        .catch(err => {
          this.skeLoading = false
          console.log(err)
        })
    },
    getGroupDailySta (id) {
      getGroupDailySta({
        groupId: id
      })
        .then(res => {
          // console.log(res.result)
          this.barData = res.result.map(function (obj) {
            var rObj = {}
            rObj.data = obj.date.split('-')[2]
            rObj.percent = parseInt(obj.estimate_commission)
            return rObj
          })
          // console.log('小组服务费', this.barData)
        })
        .catch(err => {
          console.log(err)
        })
    },
    getCrewList (id, rank) {
      getCrewList({
        groupId: id,
        rank: rank
      })
        .then(res => {
          // console.log('组员列表', res.result)
          this.userList = res.result.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    getAdmingroupList () {
      getAdmingroupList({})
        .then(res => {
          this.groupList = res.result
          // console.log('小组列表', this.groupList)
          if (this.idd !== undefined) {
            // console.log('idd', this.idd)
            var ac = this.groupList.filter(e =>
              e.groupId === this.idd
            )
            // console.log('ac', ac[0])
            this.groupde = ac[0].groupName
            // console.log('this.groupde', this.groupde)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          values.type = this.type
          values.timeSolt = this.timeSolt
          this.values = values
          this.getUserOrderList(values)
        }
      })
    },
    todayChange (value) {
      this.timeSolt = value
      this.getGroupDataSta(value)
    },
    typeChange (value) {
      this.type = value
    },
    handleTableChange (pagination, filters, sorter) {
      const param = this.values
      param.pageSize = pagination.pageSize
      param.page = pagination.current
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager

      this.getUserOrderList(this.values)
    }

  }
}
</script>
<style lang="less" scoped>
.dataSta{
  .showBox{
    width: 100%;
    height: 80px;
    border-right:1px solid rgb(219, 217, 217) ;
    font-size: 20px;
    text-align: center;
    margin-top:20px;
    p{
      margin-bottom: 0!important;
    }
    .shownum{
      font-size: 30px;
      font-weight: bold;
    }
  }
  .showBox.show2{
    border-right:none ;
  }
  #canvas_2 {
  width: 100% !important;
}
}
</style>
